<h2 class="pac-page-title">{{ 'PAC.Integration.Integration' | translate: {Default: 'Integration' } }}</h2>

<div class="flex-1 overflow-auto">
  <form class="flex flex-col gap-2 p-4 max-w-full lg:max-w-lg" [formGroup]="formGroup">
    <!-- <pac-avatar-editor formControlName="avatar" class="w-24 h-24 self-center" /> -->
    <emoji-avatar formControlName="avatar" large editable class="self-center rounded-xl overflow-hidden shadow-sm"/>
    
    <ngm-input class="flex-1" [label]="'PAC.KEY_WORDS.Name' | translate: {Default: 'Name'}"
      formControlName="name"
    />

    <div class="flex-1 min-w-full flex flex-col">
      <label class="ngm-input-label shrink-0">{{'PAC.KEY_WORDS.Description' | translate: {Default: 'Description'} }}</label>
      <textarea class="ngm-input-element" matInput formControlName="description"
        cdkTextareaAutosize
        cdkAutosizeMinRows="1"
        cdkAutosizeMaxRows="5">
      </textarea>
    </div>

    <ngm-select class="flex-1" [label]="'PAC.Integration.Provider' | translate: {Default: 'Provider'}" valueKey="key"
      [displayBehaviour]="DisplayBehaviour.descriptionOnly"
      formControlName="provider"
      [selectOptions]="providers()"
    />

    @if (integrationProvider(); as provider) {
      @if (provider.pro) {
        <card-pro helpUrl="/pricing/" [description]="{
          zh_Hans: '专业版集成场景',
          en_US: 'Integration Scenarios of Professional Edition'
        }"/>
      } @else {
        <parameter-form #optionsForm [schema]="schema()" [ngModel]="optionsControl.value" (ngModelChange)="optionsControl.setValue($event)" [ngModelOptions]="{standalone: true}" />
      }
    }

    @if(webhookUrl()) {
      <div>
        <p>{{ 'PAC.Integration.WebhookUrl' | translate: {Default: 'Webhook url'} }}:</p>
        <pre class="px-2 py-1 rounded-md text-sm whitespace-break-spaces bg-gray-50 dark:bg-white/10">{{webhookUrl()}}</pre>
      </div>
    }

    <div class="w-full filter-bar p-2 flex justify-between items-center gap-4">
      <button mat-flat-button type="button" [disabled]="!integrationProvider() || optionsInvalid" (click)="test()">
        {{ 'PAC.KEY_WORDS.Test' | translate: {Default: 'Test'} }}
      </button>
      <div ngmButtonGroup class="flex items-center gap-2">
        <button mat-flat-button type="button" (click)="cancel()">
          {{ 'PAC.KEY_WORDS.Cancel' | translate: {Default: 'Cancel'} }}
        </button>
        <button mat-raised-button color="primary"
          [matTooltip]=" 'PAC.KEY_WORDS.Save' | translate: {Default: 'Save' }"
          matTooltipPosition="above"
          [disabled]="formGroup.invalid || formGroup.pristine || optionsInvalid" 
          (click)="upsert()"
        >
          <mat-icon fontSet="material-icons-outlined">save</mat-icon>
          {{ 'PAC.KEY_WORDS.Save' | translate: {Default: 'Save'} }}
        </button>
      </div>
    </div>
  </form>
  
</div>

@if (loading()) {
  <ngm-spin class="absolute left-0 top-0 w-full h-full"></ngm-spin>
}